<template>
	<view>
		<view class="tab-box">
			<view class="tab-title">
				<view :class="['title-item flex-1', activeIdx==0?'active-0':'detive-0']" @click="selectTitle(0)">
					{{tabTitle[0].name}}
				</view>
				<view :class="['title-item flex-1', activeIdx==1?'active-1':'detive-1']" @click="selectTitle(1)">
					{{tabTitle[1].name}}
				</view>
			</view>
			<view class="tab-content flex-1">{{tabTitle[activeIdx].name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "switchTab",
		data() {
			return {
				tabTitle: [{
						id: 0,
						name: '选项卡一'
					},
					{
						id: 1,
						name: '选项卡二'
					},
				],
				activeIdx: 0,
				tabContent: ''
			};
		},
		methods: {
			selectTitle(e) {
				this.activeIdx = e
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding: 0 10px;
	}

	.tab-box {
		height: 200px;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 100px;

		.tab-title {
			height: 40px;
			display: flex;

			.title-item {
				flex: 1;
				background-color: #ffa726;
				color: #FFF;
				// transition: all .1s;

				&.active-0 {
					border-top-right-radius: 10px;
				}

				&.detive-0 {
					background: #ffd392;
					border-bottom-right-radius: 10px;
					border-top-left-radius: 10px;
					position: relative;
					bottom: -10px;
				}

				&.active-1 {
					border-top-left-radius: 10px;
				}

				&.detive-1 {
					background: #ffd392;
					border-bottom-left-radius: 10px;
					border-top-right-radius: 10px;
					position: relative;
					bottom: -10px;
				}
			}
		}

		.tab-content {
			height: calc(100% - 40px);
			background-color: #ffa726;
		}
	}
</style>